<template>
  <div class="se-container">
    <div class="se-header">仓库管理</div>
    <div class="se-body">
      <div class="se-table-header">
        <el-button
          class="se-table-header-button"
          type="primary">添加仓库</el-button>
      </div>
      <el-table
        v-loading="loading"
        id="examine-table"
        :data="list"
        :height="tableHeight"
        class="main-table"
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick">
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :prop="item.prop"
          :width="item.width"
          :label="item.label"
          show-overflow-tooltip>
          <template
            slot="header"
            slot-scope="scope">
            <div class="table-head-name" :title="scope.column.label">{{ scope.column.label }}</div>
          </template>
        </el-table-column>
        <el-table-column/>
        <el-table-column
          fixed="right"
          label="操作"
          width="250">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick('edit', scope)">编辑</el-button>
            <el-button
              type="text"
              size="small"
              @click="handleClick('delete', scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'warehouse',
  data() {
    return {
      loading: false, // 加载动画
      tableHeight: document.documentElement.clientHeight - 240, // 表的高度
      list: [],
      fieldList: [
        {
          prop: 'name',
          label: '仓库名称',
          width: 150
        },
        {
          prop: 'whNumber',
          label: '仓库编号',
          width: 150
        },
        {
          prop: 'whDress',
          label: '地址',
          width: 100
        },
        {
          prop: 'responDpt',
          label: '负责部门',
          width: 150
        },
        {
          prop: 'updateUserName',
          label: '负责人',
          width: 150
        },
        {
          prop: 'updateTime',
          label: '备注',
          width: 150
        },
        {
          prop: 'status',
          label: '创建人',
          width: 100
        },
        {
          prop: 'status',
          label: '创建时间',
          width: 100
        }
      ],
      currentPage: 1,
      pageSize: 10,
      pageSizes: [10, 20, 30, 40],
      total: 0
    }
  },
  methods: {
    handleRowClick() {
      console.log(1212)
    },
    handleClick(val) {
      console.log(val)
    },
    // 更改每页展示数量
    handleSizeChange(val) {
      this.pageSize = val
      // this.getList()
    },
    // 更改当前页数
    handleCurrentChange(val) {
      this.currentPage = val
      // this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
  .se-header {
    height: 60px;
    position: relative;
    z-index: 100;
    padding: 0 20px;
    font-size: 18px;
    line-height: 60px;
  }

  .se-body {
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 2px;
  }

  .se-table-header {
    height: 50px;
    background-color: white;
    position: relative;
    .se-table-header-button {
      float: right;
      margin-right: 20px;
      margin-top: 10px;
    }
  }

  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  @import "../../styles/table";
</style>
